<!--- 
@%HEADER%@


Copyright @%CUR_YEAR%@ Seb Duggan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
--->

<cfoutput>

<form method="post" action="#cgi.script_name#">
	
	<p class="infomessage">
		To display the Last.fm pod, you will need to enable it in the
		<a href="http://local.mango.sebduggan.com/admin/generic.cfm?event=podManager-showSettings&owner=PodManager&selected=podManager-showSettings">Pod Manager</a>.
	</p>
		
	<fieldset>
		<legend>Last.fm account details</legend>
		<p>
			<label for="userName">User name</label>
			<span class="hint">Enter your Last.fm user name. If you don't have an account yet, <a href="http://www.last.fm/join">set one up</a>.</span>
			<span class="field"><input type="text" id="userName" name="userName" value="#LOCAL.formFieldData.userName#" size="15" class="required"/></span>
		</p>

		<p>
			<label for="apiKey">API key</label>
			<span class="hint">You need an API key from Last.fm to use this service. <a href="http://www.last.fm/api/account">Get one now</a> - it'll only take a minute.</span>
		    <span class="field"><input type="text" id="apiKey" name="apiKey" value="#LOCAL.formFieldData.apiKey#" size="30" class="required"/></span>
		</p>
	</fieldset>
	
	<fieldset>
		<legend>Display options</legend>
		
		<p>
			<label for="title">Pod title</label>
			<span class="hint">Enter the title you wish to give your Last.fm pod.</span>
			<span class="field"><input type="text" id="title" name="title" value="#HTMLEditFormat(LOCAL.formFieldData.title)#" size="30"/></span>
		</p>

		<p>
			<label for="count">Number of tracks</label>
			<span class="hint">How many recent tracks do you wish to display?</span>
			<span class="field"><input type="text" id="count" name="count" value="#LOCAL.formFieldData.count#" size="3" class="required digits"/></span>
		</p>
		
		<p>
			<strong>Optional display items</strong>
			<span class="field">
				<label class="option"><input type="checkbox" name="showAlbum" value="1"<cfif getSetting("showAlbum")> checked="checked"</cfif> /> Show album name</label><br />
				<label class="option"><input type="checkbox" name="showCover" value="1"<cfif getSetting("showCover")> checked="checked"</cfif> /> Show cover artwork</label><br />
				<label class="option"><input type="checkbox" name="showTime" value="1"<cfif getSetting("showTime")> checked="checked"</cfif> /> Show time listened</label>
			</span>
		</p>

		<p>
			<label for="coverSize">Album artwork size</label>
			<span class="hint">The width in pixels of the album artwork image</span>
			<span class="field"><input type="text" id="coverSize" name="coverSize" value="#LOCAL.formFieldData.coverSize#" size="3" class="required digits"/> pixels</span>
		</p>

		<p>
			<label for="logo">Last.fm logo colour</label>
			<span class="hint">The pod displays a link back to Last.fm (required under the terms of the API) - what colour logo would you like?</span>
			<span class="field"><select id="logo" name="logo" class="required">
				<option value="red"<cfif LOCAL.formFieldData.logo is "red"> selected="selected"</cfif>>Red</option>
				<option value="grey"<cfif LOCAL.formFieldData.logo is "grey"> selected="selected"</cfif>>Grey</option>
				<option value="black"<cfif LOCAL.formFieldData.logo is "black"> selected="selected"</cfif>>Black</option>
			</select>
			<img src="#getAssetPath()#lastfm_#LOCAL.formFieldData.logo#.png" width="48" height="15" alt="Last.fm" style="vertical-align:text-bottom;" id="logo-preview" /></span>
		</p>

		<p>
			<label for="css">Pod CSS</label>
			<span class="hint">Customise the styles used to display the Last.fm pod</span>
		    <span class="field"><textarea id="css" name="css" cols="60" rows="10" class="required">#LOCAL.formFieldData.css#</textarea><br />
			<label><input type="checkbox" name="defaultCss" value="1" /> Reset CSS to default</label></span>
		</p>
	</fieldset>
	
	<fieldset>
		<legend>Cache options</legend>
		
		<p>
			<label for="cacheMins">Cache duration</label>
			<span class="hint">How long do you wish the track feed to be remembered before requesting it again from the Last.fm servers?</span>
			<span class="field"><input type="text" id="cacheMins" name="cacheMins" value="#LOCAL.formFieldData.cacheMins#" size="3" class="required number"/> minutes</span>
		</p>

		<p>
			<input type="checkbox" id="clearCache" name="clearCache" value="1" /><label for="clearCache">Clear cached tracks</label>
			<span class="hint">The cache will be cleared immediately and new data will be retrieved.</span>
		</p>
	</fieldset>


	<div class="actions">
		<input type="submit" class="primaryAction" value="Submit"/>
		<input type="hidden" name="action" value="event" />
		<input type="hidden" name="event" value="showLastfmSettings" />
		<input type="hidden" name="apply" value="true" />
		<input type="hidden" name="selected" value="lastfm" />
	</div>

</form>


<script type="text/javascript">
$(function(){
	$('select##logo').change(function(){
		var newColour = $(this).val();
		$('img##logo-preview').attr('src','#getAssetPath()#lastfm_'+newColour+'.png');
	});
});
</script>

</cfoutput>